<template>
  <page-header-wrapper>
    <a-card :border="false">
      <!-- <div>
        <ol>
          <li>新标签页登录scrm商户后台。</li>
          <li>点击去授权，进行自动授权。</li>
          <li>刷新此页面展示授权信息。</li>
        </ol>
      </div> -->
      <!-- <div class="flex" style="font-size: 16px; margin-bottom: 10px">
        <div style="text-align: right; margin-right: 20px">scrm系统api链接地址：</div>
        <div class="flenx-w-1" style="min-width: 300px">
          <a-input v-model="urlValue" placeholder="http或https开头"></a-input>
        </div>
        <a-button @click="submit" type="primary">提交</a-button>
      </div> -->

      <div style="width: 600px">
        <a-form-model
          ref="ruleForm"
          :model="formData"
          :rules="rules"
          layout="vertical"
          :wrapperCol="{ span: 17 }"
          :labelCol="{ span: 7 }"
        >
          <!-- <a-form-model-item label="是否已授权">
            <div v-if="isopen" class="flex-y-center">
              <a-tag color="#87d068"> 已授权 </a-tag>
            </div>
            <div v-else class="flex-y-center">
              <a-button @click="clickLink" :loading="btLoading" type="link">否 去授权 </a-button>
            </div>
          </a-form-model-item> -->
          <a-form-model-item v-if="isopen && mini" label="小程序">
            <div class="flex-y-center">
              <a-tag v-if="mini" color="#87d068"> {{ mini.appid }} </a-tag>
              <a-tag v-if="mini" color="#87d068"> {{ mini.mini_nickname }} </a-tag>
            </div>
          </a-form-model-item>
          <a-form-model-item v-if="isopen" label="开放平台">
            <div v-if="open_appid">
              <div class="flex-y-center">
                <a-tag v-if="open_appid.code == 0" color="#87d068"> {{ open_appid.data.open_appid }} </a-tag>
                <a-tag v-else color="#ee2222"> {{ open_appid.msg }} </a-tag>
              </div>
            </div>
            <div v-if="open_appid" class="flex-y-center">
              注意：如果开放平台账号未认证过，请参考文档进行认证：
              <a
                target="_blank"
                href="https://developers.weixin.qq.com/doc/oplatform/Third-party_Platforms/2.0/product/Open_Platform_Account_Management.html#%E5%9B%9B%E3%80%81%E8%AE%A4%E8%AF%81%E4%BB%A3%E6%B3%A8%E5%86%8C%E7%9A%84%E5%B8%90%E5%8F%B7"
                >文档</a
              >
            </div>
          </a-form-model-item>

          <a-form-model-item label="是否启用：" prop="isopen">
            <a-switch v-model="isopenFiler" />
          </a-form-model-item>
          <a-form-model-item label="agentId：" prop="agentId">
            <a-input v-model="formData.agentId" placeholder="请输入agentId" />
          </a-form-model-item>
          <a-form-model-item label="corp_id：" prop="corp_id">
            <a-input v-model="formData.corp_id" placeholder="请输入corp_id" />
          </a-form-model-item>
          <a-form-model-item label="token：" prop="token">
            <a-input v-model="formData.token" placeholder="请输入token" />
          </a-form-model-item>
          <a-form-model-item label="SCRM系统API域名：" prop="mochatUrl">
            <a-input v-model="formData.mochatUrl" placeholder="SCRM系统API域名" />
          </a-form-model-item>
          <a-form-model-item label="SCRM系统侧边栏域名：" prop="mochatUrl_sidebar">
            <a-input v-model="formData.mochatUrl_sidebar" placeholder="SCRM系统侧边栏域名" />
          </a-form-model-item>
          <a-form-model-item label="消息接收人">
            <div class="flex-y-center">
              <div style="margin-right: 10px">{{ formData.idsendMsg_wxUserId_name || '无' }}</div>
              <a-button @click="visible = true" size="small">{{
                formData.idsendMsg_wxUserId_name ? '修改' : '选择'
              }}</a-button>
            </div>
          </a-form-model-item>
          <a-form-model-item label=" ">
            <a-button @click="submit" type="primary">提交信息</a-button>
          </a-form-model-item>
        </a-form-model>
      </div>

      <a-modal centered title="消息接收人" :visible="visible" :footer="null" @cancel="visible = false">
        <a-form layout="inline" style="margin-bottom: 20px">
          <a-form-item label="昵称">
            <a-input v-model="modalForm.name"></a-input>
          </a-form-item>
          <a-button type="primary" @click="$refs.modalTable.refresh(true)">搜索</a-button>
        </a-form>

        <STable ref="modalTable" :columns="modalColumns" :data="loadModalData">
          <div slot="options" slot-scope="item">
            <a-button @click="checkUser(item)" type="primary" size="small">选择</a-button>
          </div>
        </STable>
      </a-modal>

      <div style="border-bottom: 1px solid #efefef; margin: 30px 0"></div>

      <a-table :pagination="false" ref="a-table" :columns="columns" :dataSource="links"></a-table>
    </a-card>
  </page-header-wrapper>
</template>

<script>
import mochatApi from '@/api/mochat'
import { STable } from '@/components'

const columns = [
  {
    title: '名称',
    dataIndex: 'name',
  },
  {
    title: '链接',
    dataIndex: 'url',
  },
  // {
  //   title: 'api',
  //   dataIndex: 'api',
  // },
]
const modalColumns = [
  {
    title: 'wxUserId',
    dataIndex: 'wxUserId',
  },
  {
    title: '昵称',
    dataIndex: 'name',
  },
  {
    title: '操作',
    scopedSlots: { customRender: 'options' },
    width: 100,
  },
]
export default {
  components: {
    STable,
  },
  data() {
    return {
      expires_time: 0,
      isopen: 0,
      btLoading: false,
      urlValue: '',
      mochat_url: '',
      mini: [],
      open_appid: [],
      formData: {
        isopen: 0, //0/1是否启用
        mochatUrl: '', //SCRM系统API域名
        mochatUrl_sidebar: '', //SCRM系统侧边栏域名
        agentIdcorp_idtokensendMsg_wxUserId: '', //消息接收人
        idsendMsg_wxUserId_name: '', //消息接收人名字
        agentId:'',
        corp_id:'',
        token:'',
      },
      rules: {
         agentId: [
          {
            required: true,
            message: '请输入agentId',
            trigger: ['blur', 'change'],
          },
        ],
        corp_id: [
          {
            required: true,
            message: '请输入corp_id',
            trigger: ['blur', 'change'],
          },
        ],
        token: [
          {
            required: true,
            message: '请输入token',
            trigger: ['blur', 'change'],
          },
        ],
        isopen: [
          {
            required: true,
            message: '是否启用',
            trigger: ['blur', 'change'],
          },
        ],
        mochatUrl: [
          {
            required: true,
            message: '请输入SCRM系统API域名',
            trigger: ['blur', 'change'],
          },
        ],
       
        mochatUrl_sidebar: [
          {
            required: true,
            message: '请输入SCRM系统侧边栏域名',
            trigger: ['blur', 'change'],
          },
        ],
        agentIdcorp_idtokensendMsg_wxUserId: [
          {
            required: true,
            message: '接收人不能为空',
            trigger: ['blur', 'change'],
          },
        ],
      },
      columns,
      links: [],
      visible: false,
      modalForm: {
        name: '',
      },
      modalColumns,
      loadModalData: async (parameter) => {
        let formData = {
          page: parameter.pageNo,
          pageSize: parameter.pageSize,
          name: this.modalForm.name,
        }
        const res = await mochatApi.employeeList(formData)
        return {
          data: res.data.list,
          pageNo: parameter.pageNo,
          totalCount: res.data.page.total,
        }
      },
    }
  },
  computed: {
    isopenFiler: {
      get() {
        return Boolean(this.formData.isopen)
      },
      set(val) {
        this.formData.isopen = Number(val)
      },
    },
  },

  methods: {
    async getData() {
      const res = await mochatApi.indexConf()
      if (res.code != 0) return
      this.formData = Object.assign(this.formData, res.data.conf)
      
      this.links = res.data.links

      this.mochat_url = res.data.conf.mochat_url
      this.expires_time = res.data.conf.refresh_time
      this.isopen = res.data.isopen
      this.mini = res.data.mini
      this.open_appid = res.data.open_appid
      this.urlValue = res.data.conf.mochat_url
    },

    async submit() {
      this.$refs.ruleForm.validate(async (v) => {
        console.log(v)
        if (v) {
          const res = await mochatApi.setConf(this.formData )
          this.$message.success('提交成功')
          this.getData()
        }
      })
    },
    async clickLink() {
      this.btLoading = true
      const res = await mochatApi.createUrl()
      this.btLoading = false
      if (res.code != 0) return Promise.reject(res)
      console.log(res.data)

      // console.log(decodeURI(res.data));
      window.open(decodeURI(res.data))
    },
    checkUser(item) {
      this.$set(this.formData, 'agentIdcorp_idtokensendMsg_wxUserId', item.wxUserId)
      this.$set(this.formData, 'idsendMsg_wxUserId_name', item.name)
      this.visible = false
    },
  },

  mounted() {
    this.getData()
  },
}
</script>

<style lang="less" scoped>
ol {
  padding-left: 20px;
  li {
    list-style-type: decimal;
  }
}
.title {
  color: #000;
  font-size: 16px;
  margin-bottom: 10px;
  white-space: nowrap;
}
.tip {
  font-size: 14px;
  color: #8c8c8c;
  display: block;
}
</style>
